<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .capture {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    background-color: pink;
    padding: 20px;
    box-sizing: border-box;
  }
  .myImg{
    margin-top: 30px;
    width: 400px;
    height: 300px;
  }
</style>

<body>

  <div class="capture">
    <!-- <img src="./wj.jpg" alt=""> -->
    <div>
      <span style="color: #f00;">这是文字文字</span>
      <span data-html2canvas-ignore="true">不写入canvas</span>
      <button onclick="handle()">123</button>
    </div>
  </div>
  <div >
    <img id="myImg"  class="myImg" src="#">
  </div>
</body>
<script src="./html2canvas.min.js"></script>
<script>
  function handle() {
    html2canvas(document.getElementsByClassName("capture")[0], {
      scale: 2,//缩放比例,默认为1
      // allowTaint: false,//是否允许跨域图像污染画布
      useCORS: true,//是否尝试使用CORS从服务器加载图像
      width: '500',//画布的宽度
      height: '200',//画布的高度
      borderRadis: 10,
      backgroundColor: '#fff',//画布的背景色，默认为透明
    }).then((canvas) => {
      //将canvas转为base64格式
      var imgUri = canvas.toDataURL("image/png");
      console.log(imgUri)
      document.getElementById("myImg").setAttribute("src", imgUri)
      window.location.href = imgUri
    });
  }
</script>

</html>